<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑课程 - 教学管理系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding-top: 20px;
        }

        .sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid #3c5166;
        }

        .sidebar-header h2 {
            margin: 0;
            font-size: 20px;
        }

        .user-info {
            margin-top: 10px;
            font-size: 14px;
            opacity: 0.8;
        }

        .menu {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

        .menu li {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu li:hover {
            background-color: #3c5166;
        }

        .menu li.active {
            background-color: #3498db;
        }

        .menu a {
            color: white;
            text-decoration: none;
            display: block;
        }

        .content {
            flex: 1;
            padding: 20px;
        }

        .content-header {
            margin-bottom: 30px;
        }

        .content-header h1 {
            margin: 0;
            color: #333;
            font-size: 24px;
        }

        .breadcrumb {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0 0 10px 0;
        }

        .breadcrumb li {
            font-size: 14px;
            color: #777;
        }

        .breadcrumb li:not(:last-child)::after {
            content: '>';
            margin: 0 8px;
        }

        .breadcrumb a {
            color: #3498db;
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
        }

        .form-row {
            display: flex;
            gap: 20px;
        }

        .form-row .form-group {
            flex: 1;
        }

        select.form-control {
            height: 40px;
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        .btn-success {
            background-color: #27ae60;
        }

        .btn-success:hover {
            background-color: #219955;
        }

        .btn-cancel {
            background-color: #aaa;
        }

        .btn-cancel:hover {
            background-color: #999;
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .logout {
            margin-top: auto;
            padding: 20px;
        }

        .logout a {
            color: #e74c3c;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>教学管理系统</h2>
                <div class="user-info" th:if="${session.user}">
                    <span th:text="${session.user.username}">teacher1</span> - 教师
                </div>
            </div>
            <ul class="menu">
                <li><a href="/teacher/dashboard">我的概览</a></li>
                <li class="active"><a href="/teacher/courses">我的课程</a></li>
                <li><a href="/teacher/students">我的学生</a></li>
                <li><a href="/teacher/grades">成绩管理</a></li>
                <li><a href="/teacher/profile">个人信息</a></li>
            </ul>
            <div class="logout">
                <a href="/logout">退出登录</a>
            </div>
        </div>

        <div class="content">
            <ul class="breadcrumb">
                <li><a href="/teacher/dashboard">我的概览</a></li>
                <li><a href="/teacher/courses">我的课程</a></li>
                <li><a th:href="@{'/teacher/course/' + ${course.courseId}}" th:text="${course.name}">计算机导论</a></li>
                <li>编辑课程</li>
            </ul>

            <div class="content-header">
                <h1>编辑课程</h1>
            </div>

            <div class="alert alert-danger" th:if="${param.error}" style="display: block;">
                保存课程信息时发生错误，请重试。
            </div>

            <form th:action="@{'/teacher/course/' + ${course.courseId} + '/update'}" method="post">
                <div class="card">
                    <div class="form-group">
                        <label for="name">课程名称</label>
                        <input type="text" id="name" name="name" class="form-control" th:value="${course.name}"
                            required>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="courseType">课程类型</label>
                            <select id="courseType" name="courseType" class="form-control" required>
                                <option value="必修" th:selected="${course.courseType == '必修'}">必修</option>
                                <option value="选修" th:selected="${course.courseType == '选修'}">选修</option>
                                <option value="公共课" th:selected="${course.courseType == '公共课'}">公共课</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="major">适用专业</label>
                            <input type="text" id="major" name="major" class="form-control" th:value="${course.major}"
                                required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="credit">学分</label>
                            <input type="number" id="credit" name="credit" class="form-control"
                                th:value="${course.credit}" min="1" max="10" required>
                        </div>
                        <div class="form-group">
                            <label for="totalHours">总学时</label>
                            <input type="number" id="totalHours" name="totalHours" class="form-control"
                                th:value="${course.totalHours}" min="1" required>
                        </div>
                        <div class="form-group">
                            <label for="semester">学期</label>
                            <select id="semester" name="semester" class="form-control" required>
                                <option value="大一上" th:selected="${course.semester == '大一上'}">大一上</option>
                                <option value="大一下" th:selected="${course.semester == '大一下'}">大一下</option>
                                <option value="大二上" th:selected="${course.semester == '大二上'}">大二上</option>
                                <option value="大二下" th:selected="${course.semester == '大二下'}">大二下</option>
                                <option value="大三上" th:selected="${course.semester == '大三上'}">大三上</option>
                                <option value="大三下" th:selected="${course.semester == '大三下'}">大三下</option>
                                <option value="大四上" th:selected="${course.semester == '大四上'}">大四上</option>
                                <option value="大四下" th:selected="${course.semester == '大四下'}">大四下</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="classDay">上课日</label>
                            <select id="classDay" name="classDay" class="form-control" required>
                                <option value="周一" th:selected="${course.classDay == '周一'}">周一</option>
                                <option value="周二" th:selected="${course.classDay == '周二'}">周二</option>
                                <option value="周三" th:selected="${course.classDay == '周三'}">周三</option>
                                <option value="周四" th:selected="${course.classDay == '周四'}">周四</option>
                                <option value="周五" th:selected="${course.classDay == '周五'}">周五</option>
                                <option value="周六" th:selected="${course.classDay == '周六'}">周六</option>
                                <option value="周日" th:selected="${course.classDay == '周日'}">周日</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="startTime">开始时间</label>
                            <input type="time" id="startTime" name="startTime" class="form-control"
                                th:value="${course.startTime}" required>
                        </div>
                        <div class="form-group">
                            <label for="endTime">结束时间</label>
                            <input type="time" id="endTime" name="endTime" class="form-control"
                                th:value="${course.endTime}" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="weeks">周次（如1-16周）</label>
                            <input type="text" id="weeks" name="weeks" class="form-control" th:value="${course.weeks}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="locationDetail">教室位置详情</label>
                        <input type="text" id="locationDetail" name="locationDetail" class="form-control"
                            th:value="${course.locationDetail}">
                    </div>

                    <div class="form-group">
                        <label for="description">课程介绍</label>
                        <textarea id="description" name="description" class="form-control"
                            th:text="${course.description}"></textarea>
                    </div>

                    <!-- 隐藏字段保持不变 -->
                    <input type="hidden" name="courseId" th:value="${course.courseId}">
                    <input type="hidden" name="teacherId" th:value="${course.teacherId}">
                    <input type="hidden" name="classroomId" th:value="${course.classroomId}">
                    <input type="hidden" name="periodId" th:value="${course.periodId}">
                    <input type="hidden" name="year" th:value="${course.year}">
                </div>

                <div class="action-buttons">
                    <a th:href="@{'/teacher/course/' + ${course.courseId}}" class="btn btn-cancel">取消</a>
                    <button type="submit" class="btn btn-success">保存修改</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('课程编辑页面加载完成');

            // 显示错误信息
            if (window.location.search.includes('error=1')) {
                document.querySelector('.alert-danger').style.display = 'block';
            }

            // 添加表单提交验证
            document.querySelector('form').addEventListener('submit', function (e) {
                const startTime = document.getElementById('startTime').value;
                const endTime = document.getElementById('endTime').value;

                // 验证开始时间和结束时间
                if (startTime && endTime && startTime >= endTime) {
                    e.preventDefault();
                    alert('结束时间必须晚于开始时间！');
                    return false;
                }

                // 提交前检查所有必填字段
                const requiredFields = document.querySelectorAll('[required]');
                let allFilled = true;

                requiredFields.forEach(function (field) {
                    if (!field.value.trim()) {
                        allFilled = false;
                        field.style.borderColor = 'red';
                    } else {
                        field.style.borderColor = '';
                    }
                });

                if (!allFilled) {
                    e.preventDefault();
                    alert('请填写所有必填字段！');
                    return false;
                }
            });
        });
    </script>
</body>

</html>